<!-- 搜索项目 -->
<template>
  <view>
    <u-popup class="form-popup" mode="right" :show="showPopup" @close="close" @open="open">
      <view>
        <u-navbar title="关联采购物料清单" @leftClick="close" style="color: blue;" :safeAreaInsetTop="false"></u-navbar>
        <view :style="'height:' + getSafeAreaTop() + 'px'" style="color: red; width: 750rpx;"></view>
				<common-search
				  class="search"
				  v-model="purchaseBillNo"
				  :isScreen="true"
				  @searchMsg="searchMsg"
				  placeholder="请输入单据编号"
				></common-search>
        <scroll-view scroll-y class="popup-list-page" :style="'height: ' + getScorollHeight() + 'px;'" @scrolltolower="loadData">
          <template v-if="isData">
            <view class="page">
              <view class="list-item" v-for="(item, index) in entities" :key="index" @click="onChecker(item, index)">
                <view class="project-item">
                  <view class="option">
                    <view class="lf">单据编号</view>
                    <view class="rl">{{ item.purchaseBill }}</view>
                  </view>
                  <view class="option">
                    <view class="lf">申请人</view>
                    <view class="rl">{{ item.proposer_dictText }}</view>
                  </view>
									<view class="option">
									  <view class="lf">申请部门</view>
									  <view class="rl">{{ item.departId_dictText }}</view>
									</view>
                  <view class="option">
                    <view class="lf">开标时间</view>
                    <view class="rl">{{ item.calibrationTime }}</view>
                  </view>
                  <view class="option">
                    <view class="lf">工期(供货期)</view>
                    <view class="rl">{{ item.supplyTime }}</view>
                  </view>
									<view class="option">
									  <view class="lf">预算价(元)</view>
									  <view class="rl">{{ item.budget }}</view>
									</view>
                  <view class="option">
                    <view class="lf">审核状态</view>
                    <view class="rl">{{ item.bpmStatus_dictText }}</view>
                  </view>
                </view>
                <view class="icon" v-show="item.isChecker">
                  <u-icon name="checkbox-mark" color="#2979ff" size="22"></u-icon>
                </view>
              </view>
              <!-- 加载更多显示 -->
              <view><u-loadmore :status="loadStatus" /></view>
            </view>
          </template>
          <view v-else>
            <u-empty mode="data" icon="/static/empty/data.png"></u-empty>
          </view>
          <view style="height: 160rpx"></view>
          <view class="btn">
            <u-button text="确定" type="primary" @click="$u.debounce(onConfirm, 500)"></u-button>
          </view>
        </scroll-view>
        <u-toast ref="uToast"></u-toast>
      </view>
    </u-popup>
  </view>
</template>

<script>
import CommonSearch from '../../../components/CommonSearch.vue'
import { erpPurchaseCalibrationList } from '@/api/index.js'
export default {
  name: 'HSelectInputPopup',
  data() {
    return {
      loading: false,
      showPopup: false,
      checkId: '', // 选中的id
      checkItem: [],
      entities: [], // 列表
      isData: true, // 判断是否有数据  true 代表有 false 代表无
      loadStatus: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
      // 传的参数
      params: {
        column: 'createTime',
        order: 'desc',
        pageNo: 1,
        pageSize: 10,
				sysOrgCode: '',
				checkStatus: 2 // 审核成功
      },
			queryParam: {
			  purchaseBill: '',
			},
			purchaseBillNo:''
    }
  },
  components: {
    CommonSearch,
  },
	props: {
		billStatus: {
		  type: [String, Number],
		  default: '',
		},
	},
  methods: {
		// 输入内容
		searchMsg(keywords) {
		  this.params.pageNo = 1 // 页数归1
		  this.entities = [] // 清空列表
		  this.$nextTick(() => {
		    this.getEntities() // 获取列表
		  })
		},
    // 获取列表
    async getEntities() {
      this.loadStatus = 'loading' // 加载中
      try {
				if(this.purchaseBillNo){
					this.queryParam.purchaseBill = '*'+this.purchaseBillNo+'*'
				} else {
					this.queryParam.purchaseBill = ''
				}
				
				let param = Object.assign({}, this.queryParam, this.params)
				if (this.billStatus) {
					param.billStatus = this.billStatus
				}
        const res = await erpPurchaseCalibrationList(param)
        let data =  res.result.records || []
        if (res.success) {
          // 判断首次加载是否有数据
          if (this.params.pageNo == 1) {
            if (data && data.length) {
              this.isData = true
            } else {
              this.isData = false
            }
          }
          if (data && data.length) {
            if (data.length >= 10) {
              this.loadStatus = 'loadmore'
            } else {
              this.loadStatus = 'nomore'
            }
            // 处理数据
            data.map((value, index) => {
              // 是否选中数据
              value.isChecker = false
              return value
            })
          } else {
            this.loadStatus = 'nomore'
          }
          if (this.params.pageNo == 1) {
            this.entities = data
          } else {
            this.entities = this.entities.concat(data)
          }
        }
      } catch (error) {
        console.error('出错了', error)
      } finally {
        this.loading = false
      }
    },
    loadData() {
      if (this.loadStatus == 'nomore') return false
      this.params.pageNo++
      this.getEntities()
    },
    // 获取safeArea
    getSafeAreaTop() {
      var top = 44
      return top
    },
    // 获取safeArea
    getScorollHeight() {
      let height = uni.getStorageSync('getSystemInfo').screenHeight - (uni.getStorageSync('getSystemInfo')?.safeArea?.top || 0) - (uni.getStorageSync('getSystemInfo')?.statusBarHeight || 0) - 44 - 32
      return height
    },
    // 点击选中取消选中
    onChecker(item, index) {
      if (this.loadStatus === 'loading') {
        return
      }
			this.entities.map((val,ind) => {
				if(ind != index){
					val.isChecker = false
				} else {
					val.isChecker = true
				}
				return val
			})
			this.checkId = item.id
			this.checkItem = [item]
    },
    onClick() {
      this.showPopup = true
    },
    onConfirm() {
      this.$emit('back', this.checkId)
      this.showPopup = false
    },
    open() {
			this.entities = [] // 清空列表
			this.isData = true
			this.params.pageNo = 1
			this.purchaseBillNo = ''
      this.getEntities() // 获取列表
    },
    close() {
      this.showPopup = false
    },
  },
}
</script>

<style lang="scss" scoped>
.search {
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #FFFFFF;
	padding: 10rpx 40rpx;
	box-sizing: border-box;
}
.page {
  padding: 0 20rpx 20rpx 20rpx;
}
.list-item {
  border-radius: 10rpx;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
  padding: 12rpx 20rpx 20rpx 20rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
}
// 按钮
.btn {
  position: fixed;
  bottom: 20rpx;
  width: 100%;
  padding: 0 10px;
}
</style>
